import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../../core/utils/ati_assets.dart';

class AtiImageUploadBox extends StatefulWidget {
  final String label;
  final void Function(File?)? onChanged;

  const AtiImageUploadBox({super.key, this.label = '上传支付凭证', this.onChanged});

  @override
  State<AtiImageUploadBox> createState() => _AtiImageUploadBoxState();
}

class _AtiImageUploadBoxState extends State<AtiImageUploadBox> {
  File? _imageFile;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final picked = await picker.pickImage(source: ImageSource.gallery);

    if (picked != null) {
      setState(() => _imageFile = File(picked.path));
      widget.onChanged?.call(_imageFile);
    }
  }

  void _removeImage() {
    setState(() => _imageFile = null);
    widget.onChanged?.call(null);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 16.r, horizontal: 12.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Text(
            widget.label,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w600,
              color: Color(0xFF666666),
            ),
          ),
          SizedBox(height: 5.r),
          // 上传框
          GestureDetector(
            onTap: _pickImage,
            child: Container(
              width: 100.r,
              height: 100.r,
              decoration: BoxDecoration(
                color: const Color(0xFFF7F8FA),
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: _imageFile == null
                  ? Image.asset(
                      width: 24.r,
                      height: 24.r,
                      AtiAssets.atiImageUp,
                      package: 'ati_package',
                    )
                  : Stack(
                      fit: StackFit.expand,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8.r),
                          child: Image.file(_imageFile!, fit: BoxFit.cover),
                        ),
                        Positioned(
                          right: 4,
                          top: 4,
                          child: GestureDetector(
                            onTap: _removeImage,
                            child: Container(
                              padding: const EdgeInsets.all(2),
                              decoration: const BoxDecoration(
                                color: Colors.black54,
                                shape: BoxShape.circle,
                              ),
                              child: const Icon(
                                Icons.close,
                                size: 16,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
            ),
          ),
        ],
      ),
    );
  }
}
